<template>
	<view class="page-main">
		<CustomNavBar title="产品" :isBack="false"></CustomNavBar>
		<scroll-view ref="scrollDom" class="page-scroll-list" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="onTolower">
			<view class='my-unit' v-for="(item,index) in tabData" :key="index">
				<view class="unit-body" @click="getDevice(item)">
					<image :src="item.photoUrl" class="" />
					<view class="list-item">
						<text class="color-999">{{item.name}}</text>
						<view class="list-con">
							<view class="list-tag">
								<text class="list-tag-label">设备类型：</text>
								<text class="list-tag-value">{{item.deviceType.text}}</text>
							</view>
							<view class="list-tag">
								<text class="list-tag-label">接入方式：</text>
								<text class="list-tag-value">{{item.accessName}}</text>
							</view>
						</view>
					</view>
					<view :class="item.state ? 'list-status' : 'list-status list-status-red'">
						<i></i>
						<text>{{item.state ? '正常' : '禁用'}}</text>
					</view>
				</view>
			</view>
			<view class="list-more">
				<uni-load-more :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import CustomNavBar from "@/components/customNavBar.vue"
	import _g from '@/static/js/global.js'
	export default {
		components:{CustomNavBar},
		data() {
			return {
				tabData: [],
				maxHeight: 0,
				triggered:false,
				refreshing:false,
				scroll:true,
				pageIndex:0,
				pageSize:12,
				total:0,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getList()
		},
		onBackPress(e) {
			//禁止左侧滑动，适用于安卓（ios不适用）
			return true;
		},
		methods: {
			onRefresh() {
				if (this.refreshing) return;
				this.refreshing = true;
				this.triggered = true
				this.getList()
			},
			onTolower(){
				if(this.tabData.length < this.total){
					this.pageIndex = this.pageIndex + 1
					this.getList()
				}
			},
			getList: function() {
				const that = this;
				that.status = 'loading'
				const appInstance = getApp();
				console.log(appInstance.globalData.url)
				_g.apiPost(appInstance.globalData.url + '/api/device-product/_query', {
					"pageIndex": that.pageIndex,
					"pageSize": that.pageSize,
					"sorts": [{
						"name": "createTime",
						"order": "desc"
					}],
					"terms": []
				}, 'POST').then(res => {
					that.triggered = false;
					that.refreshing = false;
					console.log(res)
					if (res.status == 200) {
						if(that.pageIndex === 0){
							that.tabData = res.result.data
						} else {
							res.result.data.forEach(function(item, index) {
								that.tabData.push(item);
							})
						}
						that.total = res.result.total
						if(that.total > that.tabData.length){
							that.status = 'more'
						} else {
							that.status = 'noMore'
						}
					}
				})
			},
			getDevice(data) {
				console.log('产品id', data.id)
				//获取设备
				uni.navigateTo({
					url: '../devices/devices?pid=' + data.id + '&title=' + data.name
				})
			}
		}
	}
</script>

<style scoped>
	.page-main{
		overflow-y: hidden;
	}
	.my-unit {
		margin: 20upx 0;
		background-color: #ffffff;
		transform: all 1s;
		position: relative;
	}
	.my-unit image {
		width: 150upx;
		height: 150upx;
		margin-right: 20upx;
	}
	.unit-body {
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
	}
	.unit-body .list-item{
		width: calc(100% - 170upx);
		height: 100%;
	}
	.unit-body .list-item text {
		width: 100%;
		font-size: 32upx;
		line-height: 70upx;
	}
	.list-con{
		width: 100%;
	}
	.list-con .list-tag text {
		font-size: 24upx;
		line-height: 40upx;
	}
	.list-con .list-tag .list-tag-label{
		color: #666;
	}
	.list-status{
		width: 120upx;
		height: 50upx;
		position: absolute;
		right: 0;
		top: 20upx;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: flex-end;
		padding: 0 20upx;
		background-color: #D9DFFD;
		border-radius: 25upx 0 0 25upx;
		box-sizing: border-box;
	}
	.list-status i{
		display: block;
		width: 8upx;
		height: 8upx;
		border-radius: 50%;
		background-color: #092EE7;
	}
	.list-status text{
		font-size: 24upx;
		color: #333;
		margin-left: 10upx;
	}
	.list-status-red{
		background-color: #FAD7DA;
	}
	.list-status-red i{
		background-color: #E60B1C;
	}
</style>